<!-- @format -->

<template>

    <div class=" lg:flex  " style="height:98%;">
      <!-- 最新 -->
      <div class="" style="margin-right:12px;height:100%;background:#fff;border-radius:10px;padding:16px;width:0;flex:1">
        <div>
          <!-- <div @click="handleOrderIndexs">更新列表</div> -->
          <div class="lg:flex">
            <a-tooltip content="请输入订单号">
              <a-input v-model="form.order_no" placeholder="请输入订单号" allow-clear style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" />
            </a-tooltip>
            <a-tooltip content="请输入原始凭证">
              <a-input v-model="form.batch_no" placeholder="请输入原始凭证" allow-clear style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" />
            </a-tooltip>
            <a-tooltip content="请输入车号">
              <a-input v-model="form.car_no" placeholder="请输入车号" allow-clear style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" />
            </a-tooltip>
            <a-tooltip content="请选择公司">
              <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.dept_id" :filter-option="filterOption" :options="dept_list" :field-names="fieldNamedept"  allow-clear allow-search
                          placeholder="请选择公司" />
            </a-tooltip>
            <a-tooltip content="请选择订单状态">
              <a-select style="width:calc((100% - 64px) / 5);margin-bottom:16px" v-model="form.pick_status" :options="pick_statusList" :field-names="fieldNamepickStatus"  allow-clear allow-search
                          placeholder="请选择订单状态" />
            </a-tooltip>
          </div>
          <div class="lg:flex">
            <a-tooltip content="请选择运输方式">
              <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.transport_type" :options="transport_typeList" :field-names="fieldNametransportType"  allow-clear allow-search
                          placeholder="请选择运输方式" />
            </a-tooltip>
            <a-tooltip content="请选择创建时间">
              <a-range-picker
                style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px"
                show-time
                :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
                format="YYYY-MM-DD HH:mm"
                @ok="handleOkTime"
              />
            </a-tooltip>
            <a-tooltip content="请选择配送公司">
              <a-select style="width:calc((100% - 64px) / 5);margin-bottom:16px" v-model="form.ps_dept_id" :options="ps_deptList" :field-names="fieldNamedept" :filter-option="filterOption" allow-clear allow-search
                          placeholder="请选择配送公司" />
            </a-tooltip>
          </div>  
          <div class="lg:flex">
            <!-- justify_end -->
            <div class="flex " style="width:calc((((100% - 64px) / 5)) );margin-bottom:16px">
              <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(1)">搜索</a-button>
              <a-button @click="handleChongZhi(1)">重置</a-button>
            </div>
          </div>
        </div>
        <div style="padding:12px 0;height:calc(100% - 154px);position:relative" ref="scroll">
          <a-scrollbar style="overflow: auto;" :style="{height:scrollHeight + 'px'}" @scroll='handleScroll'>
            <cardList :list="cardLists" :loading="loading" :active="active" @actives='handleActive' :type="2"></cardList>
          </a-scrollbar>
          <!-- 加载中... -->
          <div v-if="loading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
              <a-spin dot :size="10" />
          </div>
        </div>
      </div>
      <div class="flex flex_column" style="width:30.3%;height:100%;background:#fff;border-radius:10px;padding:12px" v-if="!isObjectEmpty(activeItem)">
        <div class="flex align_center justify_between marbot14">
          <div class="flex align_center ">
            <div style="font-size:16px;line-height:24px;font-weight:600;margin-right:20px">{{activeItem?.dept?.name}}</div>
            <div style="color:rgba(0, 0, 0, 0.6)">订单号：{{activeItem?.order_no}}</div>
          </div>
          <a-tag bordered :color="activeItem.pick_status == 0 || activeItem.pick_status == 3?'orangered':activeItem.pick_status == 2 || activeItem.pick_status == 4?'gray':'green'">
              {{activeItem.pick_status == 0?'待确认':activeItem.pick_status == 1?'已完成':activeItem.pick_status == 2?'未开始':activeItem.pick_status == 3?'进行中':'已取消'}}
          </a-tag>
        </div>
        <div v-if="activeItem.pick_status == 0" class="marbot14">
          <a-popconfirm @ok="orderShouli(activeItem)" content="是否确认受理?" @cancel="handleMare">
            <a-button size="mini" type="primary" @click="handleMare">受理</a-button>
          </a-popconfirm>
          <a-popconfirm @ok="confirmOk(activeItem.id)" content="是否确认取消此提单?" @cancel="handleMare">
            <a-button size="mini" type="primary" style="margin-left:16px;" @click="handleMare">取消订单</a-button>
          </a-popconfirm>
        </div>
        <!-- 选项卡列表 -->
        <div class="flex marbot14" style="border-bottom:1px solid rgba(0, 0, 0, 0.15)">
          <div class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'jc'?'activetabs':''" style='padding:12px 0' @click="handleTabs('jc')">
            <img src="/public/tipIcon.svg" style="width:44px;height:44px;border-radius:10px" />
            <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">基础信息</div>
          </div>
          <div v-if="activeItem.pick_status == 1 || activeItem.pick_status == 2 ||  activeItem.pick_status == 3" class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'zc'?'activetabs':''" style='padding:12px 0' @click="handleTabs('zc')">
            <img src="/public/tipzhuang.svg" style="width:44px;height:44px;border-radius:10px" />
            <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">历史装车单</div>
          </div>
          <div v-if="activeItem.accept_status == 1" class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'sj'?'activetabs':''" style='padding:12px 0' @click="handleTabs('sj')">
            <img src="/public/tipBang.svg" style="width:44px;height:44px;border-radius:10px" />
            <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">绑定司机</div>
          </div>
          <div v-if="activeItem.pick_status == 2 ||  activeItem.pick_status == 3 || activeItem.pick_status == 1" class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'xd'?'activetabs':''" style='padding:12px 0' @click="handleTabs('xd')">
            <img src="/public/tipXia.svg" style="width:44px;height:44px;border-radius:10px" />
            <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">创建装车单</div>
          </div>
          <div class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'cz'?'activetabs':''" style='padding:12px 0' @click="handleTabs('cz')">
            <img src="/public/tipCao.svg" style="width:44px;height:44px;border-radius:10px" />
            <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">操作记录</div>
          </div>
          <!-- <div class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'zd'?'activetabs':''" style='padding:12px 0' @click="handleTabs('zd')">
            <img src="/public/tipZhang.svg" style="width:44px;height:44px;border-radius:10px" />
            <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">账单</div>
          </div> -->
          <!-- <div class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'qr'?'activetabs':''" style='padding:12px 0' @click="handleTabs('qr')">
            <img src="/public/tipQue.svg" style="width:44px;height:44px;border-radius:10px" />
            <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">确认</div>
          </div> -->
        </div>
        <!-- 主体信息 -->
        <div class="flex_1" style="overflow: auto;">
          <!-- 基础信息 -->
          <div v-if="tabs == 'jc'" style="padding:12px">
            <div class="flex" style='margin-bottom:20px'>
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>提单号</div>
              <div>{{activeItem?.order_no}}</div>
            </div>
            <div class="flex" style='margin-bottom:20px'>
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>客户名称</div>
              <div>{{activeItem?.dept?.name}}</div>
            </div>
            <div class="flex" style='margin-bottom:20px'>
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>总件数/剩余件数</div>
              <div>{{activeItem?.pick_number_zong}}件/{{activeItem.pick_number_yu}}件</div>
            </div>
            <div class="flex" style='margin-bottom:20px'>
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>总吨数/剩余吨数</div>
              <div>{{activeItem?.pick_weight_zong}}吨/{{activeItem.pick_weight_yu}}吨</div>
            </div>
            <div class="flex" style='margin-bottom:20px'>
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>车号</div>
              <div class="flex align_center flex_wrap flex_1 width0">
                <div style="margin-right:20px;margin-bottom:8px" v-if="!activeItem.showCar">{{activeItem?.car_nos?.length}} 个车号</div>
                <div style="margin-right:20px;max-width: 100%;word-wrap: break-word;" v-else>
                    <div class="flex flex_wrap"></div>
                    <a-tag color="arcoblue" v-for="(item,index) in activeItem?.car_nos" :key="index" style="margin-right:8px;margin-bottom:8px">{{item}}</a-tag>
                </div>
                <a-link style="margin-bottom:8px" @click="handleShowCar">{{activeItem.showCar?'点击收起':'点击查看'}}</a-link>
              </div>
            </div>
            <div class="flex" style='margin-bottom:20px'>
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>订单状态</div>
              <div :style="{color:activeItem.pick_status == 0 || activeItem.pick_status == 3?'orangered':activeItem.pick_status == 2 || activeItem.pick_status == 4?'gray':'green'}">· {{activeItem.pick_status == 0?'待确认':activeItem.pick_status == 1?'已完成':activeItem.pick_status == 2?'未开始':activeItem.pick_status == 3?'进行中':'已取消'}}</div>
            </div>
            <div class="flex" style='margin-bottom:20px'>
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>原始凭证</div>
              <div>{{activeItem?.batch_no}}</div>
            </div>
            <div class="flex" style='margin-bottom:20px'>
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)' >运输方式</div>
              <div>{{activeItem.transport_type == 1?'集装箱':activeItem.transport_type == 2?'整车':'批量快运'}}</div>
            </div>
            <div class="flex" style='margin-bottom:20px'>
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)' >服务方式</div>
              <div>{{activeItem.service_type == 1?'站到站':activeItem.service_type == 2?'站到门':activeItem.service_type == 3?'门到站':'门到门'}}</div>
            </div>
            <div class="flex" style='margin-bottom:20px'>
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>创建时间</div>
              <div>{{activeItem?.created_at}}</div>
            </div>
            <div class="flex" style='margin-bottom:20px' >
              <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>配送公司</div>
              <div>{{activeItem?.ps_dept.name}}</div>
            </div>
          </div>
          <!-- 已下装车单 -->
          <div class="flex flex_column" v-show="tabs == 'zc'" style="height:100%">
            <div class="flex">
              <a-tooltip content="请输订单号">
                <a-input v-model="orderItem.order_no" placeholder="请输订单号" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
              </a-tooltip>
              <a-tooltip content="请输司机车牌">
                <a-input v-model="orderItem.deriver_car_no" placeholder="请输司机车牌" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
              </a-tooltip>
              <a-tooltip content="请输司机手机">
                <a-input v-model="orderItem.deriver_mobile" placeholder="请输司机手机" allow-clear style="width:calc((100% - 24px) / 3);margin-right:0px;margin-bottom:12px" />
              </a-tooltip>
              
            </div>
            <div class="flex">
              <a-tooltip content="请选择订单状态">
                <a-select style="width:calc((100% - 24px) / 3);margin-right:0px;margin-bottom:12px" v-model="orderItem.deriver_pick_status" :options="deriver_pick_statusList" :field-names="fieldNamederiverpickStatus"  allow-clear allow-search
                            placeholder="请选择订单状态" />
              </a-tooltip>
              <a-tooltip content="请选择创建时间">
                <a-range-picker
                  style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px"
                  show-time
                  :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
                  format="YYYY-MM-DD HH:mm"
                  @ok="handleOkTimes"
                />
              </a-tooltip>
              <div class="flex justify_end" style="width:calc((100% - 24px) / 3);margin-right:0px;margin-bottom:12px">
                <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(3)">搜索</a-button>
                <a-button @click="handleChongZhi(3)">重置</a-button>
              </div>
            </div>
            <div class="flex justify_between align_center marbot12">
              <div class="flex">
                <!-- <a-button type="primary" style="margin-right:16px;">导出列表</a-button> -->
                
              </div>
              <div style="font-size:14px;color:rgba(0,0,0,.4)">共{{deriverorderLists.length}}项</div>
            </div>
            <div class="flex_1" ref="zcScroll" style="position:relative">
              <a-scrollbar style="overflow: auto;" :style="{height:zcScrollHeight + 'px'}" @scroll='handlezcScroll'>
                <deriverorder :list="deriverorderLists" :loading="yxzcdloading" :inforow="activeItem" @shuaxin='handleShuaxin'></deriverorder>
              </a-scrollbar>
              <div v-if="yxzcdloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                  <a-spin dot :size="10" />
              </div>
            </div>
            
            
            
          </div>
          <!-- 绑定司机 -->
          <div class="flex flex_column" v-show="tabs == 'sj' " style="height:100%">
            <div class="flex align_center">
              <a-tooltip content="请选择绑定司机">
                <a-select style="width:calc(100% / 2);margin-right:12px;margin-bottom:12px" v-model="CarNoItem.car_ids" :filter-option="filterOption" :options="bangdingsijiList" :field-names="fieldNamebangdingsiji"  allow-clear allow-search
                            placeholder="请选择绑定司机" />
              </a-tooltip>
              <div class="flex align_center justify_end" style="width:calc(100% / 2);margin-bottom:12px">
                <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(4)">搜索</a-button>
                <a-button @click="handleChongZhi(4)">重置</a-button>
              </div>
            </div>
            <div class="flex align_center justify_between marbot12">
              <a-button type="primary" style="margin-right:16px;" @click="handleAddSiJi" v-auth="['prediction:order:saveDriver']">新增司机</a-button>
              <div style="font-size:14px;color:rgba(0,0,0,.4)">共{{CarNoList.length}}项</div>
            </div>
            <div class="flex_1" ref="sjScroll" style="position:relative">
              <a-scrollbar style="overflow: auto;" :style="{height:sjScrollHeight + 'px'}" @scroll='handlesjScroll'>
                <derivercar :list="CarNoList" :loading="sjloading" @shuaxin='handleShuaxinSJ'></derivercar>
              </a-scrollbar>
              <!-- 加载中... -->
              <div v-if="sjloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                  <a-spin dot :size="10" />
              </div>
            </div>
          </div>
          <!-- 账单 -->
          <div class="flex flex_column" v-show="tabs == 'zd'" style="height:100%">
            <div class="flex align_center justify_between marbot12">
              <div class="flex">
                <!-- <a-button type="primary" style="margin-right:16px;" @click="editShow({price_config: [], predicateOrder: activeItem})">创建账单</a-button> -->
                <a-button type="primary" style="margin-right:16px;" @click='handleZhifu'>批量支付</a-button>
                <a-button type="primary" style="margin-right:16px;" @click='handleQueRenZhangdan'>确认账单</a-button>
              </div>
              
              <div style="font-size:14px;color:rgba(0,0,0,.4)">共{{billList.length}}项</div>
            </div>
            <div class="flex_1" ref="zdScroll" style="position:relative">
              <a-scrollbar style="overflow: auto;" :style="{height:zdScrollHeight + 'px'}" @scroll='handlezdScroll'>
                <OrderShowItems ref="orderShowItemsRef" :list="billList" :yuguItem="yuguBillItem" :zhifuShow="zhifuShow" @chuanList="handlechuanList" @shuaxin='handleShuaxinZD' @zhifushows="zhifuShowFun"></OrderShowItems>
              </a-scrollbar>
              <div v-if="zhangdanloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                  <a-spin dot :size="10" />
              </div>
              
            </div>
          </div>
          <!-- 确认 -->
          <div class="flex flex_column" v-show="tabs == 'qr'" style="height:100%">
            <a-empty />
          </div>
          <!-- 操作 -->
          <div class="flex flex_column" v-show="tabs == 'cz'" style="height:100%">
            <!-- <div class="cards flex justify_between align_center marbot12">
              <div class="">
                <div style="font-size:16px;line-height:24px;font-weight:600;margin-bottom:8px">更正订单</div>
                <div style="font-size:12px;line-height:20px;font-weight:400;color:rgba(0,0,0,.6)">确认提货完结，退还未装车件数和重量至预报或仓储</div>
              </div>
              <a-button type="primary" @click="orderGengzheng(activeItem)" style="margin-left:16px;" :disabled='(activeItem?.pick_status == 2 ||  activeItem?.pick_status == 3) && ((activeItem?.pick_number_yu - 0 > 0) ||(activeItem?.pick_weight_yu - 0 > 0))?false:true'>点击更正</a-button>
            </div> -->
            <div class="cards flex justify_between align_center marbot12">
              <div style="font-size:16px;line-height:24px;font-weight:600;">取消订单</div>
              <a-popconfirm @ok="confirmOk(activeItem.id)" content="是否确认取消此提单?" @cancel="handleMare">
                <a-button type="primary" style="margin-left:16px;" :disabled='activeItem.pick_status == 0 ||  activeItem.pick_status == 2?false:true' @click="activeItem.pick_status == 0 ||  activeItem.pick_status == 2?handleMare:''">点击取消</a-button>
              </a-popconfirm>
            </div>
          </div>
          <!-- 下单 -->
          <div class="flex flex_column" v-show="tabs == 'xd'" style="height:100%">
            <!-- 集装箱 -->
            <div v-if="activeItem.transport_type == 1">
              <div class="flex">
                <a-tooltip content="请输箱号">
                  <a-input v-model="xiadanItem.prediction.box" placeholder="请输箱号" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
                </a-tooltip>
                <a-tooltip content="请输箱型箱类">
                  <a-input v-model="xiadanItem.prediction.box_type" placeholder="请输箱型箱类" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
                </a-tooltip>
                <div class="flex align_center justify_end" style="width:calc((100% - 24px) / 3);margin-bottom:12px">
                  <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(2)">搜索</a-button>
                  <a-button @click="handleChongZhi(2)">重置</a-button>
                </div>
              </div>
            </div>
            <!-- 整车 -->
            <div v-if="activeItem.transport_type == 2">
              <div class="flex">
                <a-tooltip content="请输品名">
                  <a-input v-model="xiadanItem.prediction.goods_name" placeholder="请输品名" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
                </a-tooltip>
                <a-tooltip content="请输车号">
                  <a-input v-model="xiadanItem.prediction.car_no" placeholder="请输车号" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
                </a-tooltip>
                <div class="flex align_center justify_end" style="width:calc((100% - 24px) / 3);margin-bottom:12px">
                  <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(2)">搜索</a-button>
                  <a-button @click="handleChongZhi(2)">重置</a-button>
                </div>
              </div>
              
            </div>
            <div class="flex_1" ref="xdScroll" style="position:relative">
              <a-scrollbar style="overflow: auto;" :style="{height:xdScrollHeight + 'px'}">
                <deriverOrderDetail v-if="tabs == 'xd'" :carlist = "CarNoList" :list="xiadanList" :car_no="xiadan_car_no" :inforow="activeItem" @shuaxin='handlexdShuaxin' @gengxincar="gengxincar"></deriverOrderDetail>
              </a-scrollbar>
              <!-- 加载中... -->
              <div v-if="xiadanloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                  <a-spin dot :size="10" />
              </div>
            </div>
            
            
            
          </div>
        </div>
      </div>
      <div class="flex flex_column" style="width:34.3%;height:100%;background:#fff;border-radius:10px;padding:12px" v-else>
        <div class="flex justify_center align_center" style="height:100%;width:100%" >
          <a-empty />
        </div>
      </div>
      <!-- 点击确认 -->
      <a-drawer
          v-model:visible="orderQueShow"
          :footer="false"
          :width="1400"
      >
        <template #title> 确认</template>
        <orderQue v-if="orderQueShow" ref="orderQueRef" :row="deptIds" @handlecolse="handlecolse"/>
      </a-drawer>
      
      <a-modal :mask-closable="false" 
          v-model:visible="gengzhengvisible"
          @cancel="handleCancel"
          :on-before-ok="handlegengzhengOk"
      >
        <template #title> 温馨提示</template>
        <div>
          是否更正提货订单数量，更正后订单不可继续提货，剩余数量将原路退回
        </div>
      </a-modal>
      
       <!-- 创建账单 -->
      <ma-form-modal
          v-if='showEdit'
          :width="800"
          title="账单编辑"
          ref="editRef"
          :pay_type='1'
          :submit="editSubmit"
          :columns="editColumn"
      >
  
      </ma-form-modal>
      <!-- 新增司机 -->
      <a-modal :mask-closable="false"  title="绑定司机" :width="600" v-model:visible="addSijiShow" @cancel="handleAddSiJi" :on-before-ok="handleaddSijiShowOk">
        <div class="flex align_center">
          <div class="flex align_center" style="margin-right:16px">
            <div style="color:red">*</div>
            <div>绑定司机：</div>
          </div>
          <a-select style="flex:1;width:0" v-model="addcar_no" :options="bangdingsijiList" :filter-option="filterOption" :field-names="fieldNamebangdingsiji"  allow-clear allow-search
                            placeholder="请选择绑定司机" />
        </div>
      </a-modal>
      <!-- 受理 -->
      <a-modal :mask-closable="false" 
          v-model:visible="slshowModle"
          title="订单受理"
          width="1200px"
          :on-before-ok="handleslOk"
      >
        <div style="display: flex; align-items: center; margin-bottom: 20px">
          <div style="font-size: 16px; width: 120px">受理订单：</div>
          <div style="font-size: 16px">{{ slitem.value?.order_no }}</div>
        </div>
        <div style="display: flex; align-items: center;margin-bottom: 20px">
          <div style="font-size: 16px; width: 120px">提货方式：</div>
          <div style="flex: 1">
            <a-select v-model="pick_method" placeholder="请选择提货方式">
              <a-option
                  v-for="(item, index) in methodList"
                  :key="index"
                  :label="item.title"
                  :value="item.key"
              />
            </a-select>
          </div>
        </div>
        <div style="display: flex; align-items: center;margin-bottom: 20px">
          <div style="font-size: 16px; width: 120px">是否对装：</div>
          <div style="flex: 1">
            <a-select v-model="buff_type" placeholder="请选择是否对装：">
              <a-option
                  v-for="(item, index) in buttList"
                  :key="index"
                  :label="item.title"
                  :value="item.key"
              />
            </a-select>
          </div>
        </div>
        <a-table summary-text="合计" summary :columns="columnsEpor"  :bordered="{wrapper: true, cell: true}"  :data="slitem.value?.detail"  :pagination="false">
                  <template #remark="{ record, rowIndex }">
                      
                  </template>
                  <template #summary-cell="{ column, record, rowIndex }">
                      {{
                          column.dataIndex == "batch_no" ? "合计" : column.dataIndex == "pick_weight"  ? (record[column.dataIndex] - 0).toFixed(3) + '吨' : column.dataIndex == "pick_number"  ? record[column.dataIndex] + '件' : ''
                      }}
                  </template>
              </a-table>
      </a-modal>
      <!-- 确认账单 -->
      <a-modal :mask-closable="false"  v-model:visible="showBill" title="确认账单" @cancel="showBill = false" :width="1400" :footer="false">
        <bill ref="billRef" v-if="showBill" :item="billData" :type="1" @quxiao="showBill = false" @shuaxin="zhangdanshuaxin"></bill>
      </a-modal>
      <mares ref="mareRef"></mares>
    </div>
  </template>
  <script setup>
  
      import { ref,shallowRef, reactive,onActivated,onMounted,watch } from "vue";
      import predictionOrder from "@/api/prediction/predictionOrder";
      import predictionOrderCar from "@/api/prediction/predictionOrderCar";
      import { Message } from "@arco-design/web-vue";
      import { Notification } from "@arco-design/web-vue";
      import { request } from "@/utils/request.js";
    import {cloneDeep, get, isEmpty} from "lodash";
    import bill from "@/components/bill/index.vue"
    import mares from "@/components/mare/mare.vue"
    import { pinyin } from "pinyin-pro"
      import tool from "@/utils/tool";
      import * as common from "@/utils/common";
      import Print from "@/utils/print";
      import { useUserStore } from "@/store";
      import deriverorder from "@/views/prediction/deriverOrder/index.vue";
      import derivercar from "@/views/prediction/orderCar/index.vue";
      import orderdetail from "@/views/prediction/orderCar/index.vue";
      import deriverOrderDetail from "./orderDetail/index.vue";
      import orderQue from "@/views/prediction/orderQue/index.vue";
    import MaFormModal from "@/components/ma-form-modal/index.vue"
    import PriceConfigEditCompanies from "@/views/system/userContractCharging/PriceConfigEdit.vue";
      import cardList from "@/components/cardList/cardList.vue";
    import FinancialPayOrder from "@/api/financial/financialPayOrder";
    import predictionOrderDetail from "@/api/prediction/predictionOrderDetail";
    import OrderShowItems from "@/views/financial/payOrder/orderShowItems.vue"
    
    
  
    const mareRef = ref()
    const OrderShowZdRef = ref;
    const showBill = ref(false)
    const billData = ref({})
    const orderShowItemsRef = ref();
      const visibleDeriverorder = ref(false);
      const visibleOrdercar = ref(false);
      const orderQueShow = ref(false);
    const slshowModle = ref(false);
      const visiblederiverOrderDetail = ref(false);
    const orderShowItems = ref(false)
      const gengzhengvisible = ref(false);
      const deriverorderRef = ref();
      const orderCarRef = ref();
      const orderQueRef = ref();
      const deriverOrderDetailRef = ref();
      const userStore = useUserStore();
      // 当前登录的用户所有信息，包括 id 用户名 昵称 等信息
      const user = userStore.user;
      // const drivers = reactive([]);
      // const drivers_id = ref()
      const deptIds = ref();
      const crudRef = ref();
      const pick_method = ref(2);
      const crudContentRef = ref();
      const queShow = ref(false);
      const slitem = reactive({});
      const methodList = reactive([
          { key: 1, title: "先打后提" },
          { key: 2, title: "先提后打" },
      ]);
      const buttList = reactive([
          { key: 1, title: "对装" },
          { key: 2, title: "非对装" },
      ]);
    const filterOption = (v,option)=>{
      return option.keywords.some(keywords=>keywords.includes(v))
    }
      const buff_type = ref(2)
    const yuGuzdShow = ref(false)
    const yujiItem = ref({})
      let okloading = false;
      let newData = "";
      let datas = [];
      let sjdatas = [];
      let selectsj = [];
      let orderId = "";
      let order_no = "";
      let gengzheng_id = "";
    const ps_deptList = ref([])
    const form = ref({
      order_no:'',
      batch_no:'',
      dept_id:'',
      car_no:'',
      pick_status:'',
      buff_type:'',
      transport_type:"",
      created_at:'',
      ps_dept_id:'',
      page:1,
      pageSize:10,
      type:2,
    })
    const dept_list = ref([])
    const pick_statusList = ref([])
    const buff_typeList = ref([])
    const transport_typeList = ref([])
    const deriver_pick_statusList = ref([])
    const bangdingsijiList = ref([])
    
    const fieldNamederiverpickStatus = {value: 'key', label: 'title'}
    const fieldNamedept = {value: 'id', label: 'name'}
    const fieldNamepickStatus = {value: 'key', label: 'title'}
    const fieldNamebuffType = {value: 'key', label: 'title'}
    const fieldNamepickType = {value: 'key', label: 'title'}
    const fieldNametransportType = {value: 'key', label: 'title'}
    const fieldNamebangdingsiji = {value: 'id', label: 'car_and_driver'}
    const scroll = ref(null)
    const scrollHeight = ref(0)
    const zcScrollHeight = ref(0)
    const zcScroll = ref(null)
    const sjScrollHeight = ref(0)  // 绑定司机的滚动高度
    const sjScroll = ref(null)   //  默认高度
    const zdScrollHeight = ref(0)  // 账单的滚动高度
    const zdScroll = ref(null)   //  默认高度
    const billList = ref([])   //  账单列表
    const yuguBillItem = ref({})   //  预估账单
    const zhifuShow = ref(false)
    const editRef = ref({})
    const showEdit = ref(true)     // 创建账单
    const xdScrollHeight = ref(0)  // 绑定司机的滚动高度
    const xdScroll = ref(null)   //  默认高度
    const xiadanList = ref([])   //  下单列表
    const xiadanItem = ref({
      order_id:'',
      prediction:{
        box:'',
        box_type:'',
        goods_name:'',
        car_no:'',
      }
    })
    const xiadan_car_no = ref('')
    const loading = ref(false)
    const sjloading = ref(false)
    const yxzcdloading = ref(false)
    const xiadanloading = ref(false)
    const zhangdanloading = ref(false)
    const addSijiShow = ref(false)
    const addcar_no = ref('')
    const gengxincar = (e)=>{
      xiadan_car_no.value = e
    }
    const handleMare = ()=>{
      mareRef.value.handleShow()
    }
    const zhangdanshuaxin = ()=>{   // 账单刷新
      showBill.value = false
      handleTabs('zd')
      handleOrderIndexs()
    }
    const handleAddSiJi = ()=>{   //  唤起绑定司机弹窗
      addSijiShow.value = !addSijiShow.value
      addcar_no.value = ''
    }
    const handleQueRenZhangdan = ()=>{
      billData.value = activeItem.value
      showBill.value = true
    }
    const handleaddSijiShowOk = async ()=>{   // 绑定司机司机
      let res = await predictionOrderCar.saveDriver({order_id: activeItem.value.id, car_ids: addcar_no.value})
      if(res.code == 200){
          Message.success('绑定成功！')
          addSijiShow.value = false
          handleorderCarLists() 
          return true
      }else{
          Message.error(res.message)
          return false
      }
        
    }
    const isObjectEmpty = (obj)=>{   // 判断是否是空对象
      console.log(obj)
      return Object.keys(obj).length === 0;
    }
    const handleShowCar = ()=>{   // 查看车牌
      activeItem.value.showCar = !activeItem.value.showCar
      console.log(activeItem.value.showCar)
    }
    const handleSouSuo = (item) =>{   //搜索
      if(item == 1){  // 提货单列表搜索
        form.value.page = 1
        cardLists.value = []
        activeItem.value = {}
        handleOrderIndex()
      }else if(item == 2){   // 下单列表
        xiadanList.value = []
        handleXiaDanList()
      }else if(item == 3){   // 已下单列表
        deriverorderLists.value = []
        orderItem.value.page = 1
        handlederiverorderList()
      }else if(item == 4){
        CarNoList.value = []
        CarNoItem.value.page = 1
        handleorderCarList()
      }
    }
    const handleChongZhi = (item) =>{
      if(item == 1){
        form.value.page = 1
        form.value.order_no = ''
        form.value.batch_no = ''
        form.value.car_no = ''
        form.value.dept_id = ''
        form.value.pick_status = ''
        form.value.buff_type = ''
        form.value.transport_type = ''
        form.value.created_at = ''
        form.value.ps_dept_id = ""
        cardLists.value = []
        activeItem.value = {}
        handleOrderIndex()
      }else if(item == 2){
          xiadanList.value = []
          xiadanItem.value.prediction.box = ''
          xiadanItem.value.prediction.box_type = ''
          xiadanItem.value.prediction.goods_name = ''
          xiadanItem.value.prediction.car_no = ''
          handleXiaDanList()
      }else if(item == 3){
        orderItem.value.order_no = ''
        orderItem.value.buff_type = ''
        orderItem.value.deriver_pick_status = ''
        orderItem.value.deriver_car_no = ''
        orderItem.value.deriver_mobile = ''
        orderItem.value.transport_type = ''
        orderItem.value.created_at = ''
        orderItem.value.page = 1
        orderItem.value.pageSize = 10
        deriverorderLists.value = []
        handlederiverorderList()
      }else if(item == 4){
        CarNoItem.value.page = 1
        CarNoItem.value.pageSize = 10
        CarNoItem.value.car_ids = ''
        CarNoList.value = []
        handleorderCarList()
      }
      
    }
    const editColumn = ref([
        {
          dataIndex: 'price_config',
          componentName: "price_config_component",
          title: '',
          formType: 'component',
          component: shallowRef(PriceConfigEditCompanies)
        },
    ])
    const cardLists = ref([])
    const active = ref(0)     // 选择的卡片
    const activeItem = ref({})
    const tabs = ref('jc')    //  详情选项卡选中的值
    const deriverorderLists = ref([])   // 装车单列表
    const orderItem = ref({
      order_no:'',
      buff_type:'',
      deriver_pick_status:'',
      deriver_car_no:'',
      deriver_mobile:'',
      transport_type:'',
      created_at:'',
      page:1,
      pageSize:10,
      order_id:''
    })
    const CarNoList = ref([])  // 已绑定司机列表
    const CarNoItem = ref({
      page:1,
      pageSize:10,
      order_id:'',
      car_ids:'',
    })
    const billItem = ref({
      page:1,
      pageSize:10,
      prediction_order_id:'',
    })
    const handlechuanList = (index)=>{
      billList.value[index].flag = !billList.value[index].flag
    }
    const handleZhifu = ()=>{
      let num = billList.value.findIndex((item)=>{
        return item.flag == true
      })
      if(num == -1){
        return Message.error('请选择需要支付的订单')
      }else{
        zhifuShow.value = true
      }
    }
    const zhifuShowFun = (res)=>{    // 接受账单组件传回来的值
      zhifuShow.value = res
    }
    const handleShuaxin = ()=>{
      console.log('刷新')
      handlederiverorderLists()
      handleOrderIndexs()
    }
      const handleShuaxinSJ = ()=>{
      handleorderCarLists()
      handleOrderIndexs()
    }
    const handleShuaxinZD = ()=>{
      handlePayOrderIndexs()
      handleOrderIndexs()
    }
    const handlexdShuaxin = ()=>{
      handleXiaDanList()
      handleOrderIndexs()
    }
    watch(active,(newValue,oldValue)=>{
      cardLists.value.map((v,i)=>{
        if(v.id == newValue){
          activeItem.value = v
        }
      })
    })
    const isShuaxin = ref(false)
    onMounted(()=>{
      console.log('onMounted')
      isShuaxin.value = true
      handleDeptList()
      handlePsDeptList()
      handlepickStatus()
      handlebuffType()
      // handlepickType()
      handletransportType()
      handlederiverpickStatus()
      handleOrderIndex()
      setTimeout(()=>{
        isShuaxin.value = false
        scrollHeight.value = scroll.value.offsetHeight - 8
      },1000)
      console.log(scroll.value)
      scrollHeight.value = scroll.value.offsetHeight - 8
    })
    onActivated(()=>{
      console.log('onActivated')
      if(!isShuaxin.value){
        form.value.page=1,
        cardLists.value = []
        handleOrderIndex()
      }
      
      
    })
    const handleXiaDanList = ()=>{   // 获取下单列表
      let objectItem = JSON.parse(JSON.stringify(xiadanItem.value))
      let obj = {}
      if(activeItem.value.service_type == 1 || activeItem.value.service_type == 2){
        obj.prediction = {}
        for(let key in xiadanItem.value){
          if(xiadanItem.value[key]){
            obj[key] = xiadanItem.value[key]
            if(obj[key].constructor === Object){
              for(let uer in obj[key]){
                if(xiadanItem.value[key][uer]){
                  obj[key][uer] = xiadanItem.value[key][uer]
                }
              }
            }
          }
        }
      }else{
        obj.wareuserdetail = {}
        for(let key in xiadanItem.value){
          if(xiadanItem.value[key].constructor !== Object){
            if(xiadanItem.value[key]){
              obj[key] = xiadanItem.value[key]
            }
          }else if(xiadanItem.value[key].constructor === Object){
            for(let uer in xiadanItem.value[key]){
                if(xiadanItem.value[key][uer]){
                  obj['wareuserdetail'][uer] = xiadanItem.value[key][uer]
                }
              }
          }
        }
      }
      xiadanloading.value = true
      request({
          url: '/prediction/orderDetail/index',
          method: 'get',
          params:obj
        }).then(res=>{
          if(res.code == 200){
            xiadanloading.value = false
            let _data = res.data.items
          _data.map((v,i)=>{
            v.pick_number = v.pick_number_yu;
                      v.pick_weight = v.pick_weight_yu;
            v.prediction = v.prediction
            if (v.pick_number_yu == 0) {
              v.disabled = true;
            } else {
              v.disabled = false;
            }
          })
          xiadanList.value = _data
          }
          
        })
    }
    const handlederiverorderLists = ()=>{   // 刷新已下订单数据
      let objDate = JSON.parse(JSON.stringify(orderItem.value))
      objDate.page = 1
      console.log(objDate)
      objDate.pageSize = objDate.page * objDate.pageSize
      let obj = {}
      for(let key in objDate){
        if(objDate[key]){
          obj[key] = objDate[key]
        }
      }
      yxzcdloading.value = true
      request({
          url: '/prediction/deriverOrder/index',
          method: 'get',
          params:obj
        }).then(res=>{
          console.log('已下提单数据：',res)
          if(res.code == 200){
            yxzcdloading.value = false
            let _data = res.data.items
            _data.map((v,i)=>{
              v.detail.map((vv,ii)=>{
                if(vv.prediction_id != 0){
                  vv.children = vv.prediction
                }
                if(v.warehouse_user_detail_id != 0){
                  vv.children = vv.wareuserdetail
                }
              })
              v.peisong_dept_id =  v.porder.peisong_dept_id
            })
            deriverorderLists.value = _data
          }
          
        })
    }
    const handlederiverorderList = ()=>{   // 已下订单数据
      let obj = {}
      for(let key in orderItem.value){
        if(orderItem.value[key]){
          obj[key] = orderItem.value[key]
        }
      }
      yxzcdloading.value = true
      request({
          url: '/prediction/deriverOrder/index',
          method: 'get',
          params:obj
        }).then(res=>{
          console.log('已下提单数据：',res)
          if(res.code == 200){
            yxzcdloading.value = false
            let _data = res.data.items
            _data.map((v,i)=>{
              v.detail.map((vv,ii)=>{
                if(vv.prediction_id != 0){
                  vv.children = vv.prediction
                }
                if(v.warehouse_user_detail_id != 0){
                  vv.children = vv.wareuserdetail
                }
                
              })
              v.peisong_dept_id =  v.porder.peisong_dept_id
            })
            console.log('下单数据：',_data)
            let list = [...deriverorderLists.value,..._data]
            deriverorderLists.value = list
          }
          
        })
    }
    const getCarNoList = (dept_id)=>{  // 获取公司可绑定的司机列表
      request({
          url: '/prediction/driver/getCarNoList?dept_id=' + dept_id,
          method: 'get',
          
        }).then(res=>{
          res.data.map((v,i)=>{
                v.keywords = [
                  v.car_and_driver,
                  pinyin(v.car_and_driver,{toneType:'none',pattern:'first'}).split(' ').join(''),
                ]
        })
          bangdingsijiList.value = res.data
        })
    }
    const handleorderCarLists = ()=>{    // 刷新已绑定司机列表
      let objDate = JSON.parse(JSON.stringify(CarNoItem.value))
      objDate.page = 1
      objDate.pageSize = objDate.page * objDate.pageSize
      let obj = {}
      for(let key in objDate){
        if(objDate[key]){
          obj[key] = objDate[key]
        }
      }
      sjloading.value = true
      request({
          url: '/prediction/orderCar/index',
          method: 'get',
          params:obj
        }).then(res=>{
          let _data = res.data.items
          _data.map((v,i)=>{
            v.car_ids = v.car_id
            v.car_and_driver = v.car_no + "-" + v.driver.driver_name
          })
          CarNoList.value = _data
          sjloading.value = false
        })
    }
    const handleorderCarList = ()=>{    // 获取已绑定司机列表
      let obj = {}
      for(let key in CarNoItem.value){
        if(CarNoItem.value[key]){
          obj[key] = CarNoItem.value[key]
        }
      }
      sjloading.value = true
      request({
          url: '/prediction/orderCar/index',
          method: 'get',
          params:obj
        }).then(res=>{
          console.log('已绑定司机：',res)
          let _data = res.data.items
          _data.map((v,i)=>{
            v.car_ids = v.car_id
            v.car_and_driver = v.car_no + "-" + v.driver.driver_name
          })
          _data.map((v,i)=>{
                v.keywords = [
                  v.car_and_driver,
                  pinyin(v.car_and_driver,{toneType:'none',pattern:'first'}).split(' ').join(''),
                  pinyin(v.car_and_driver,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
                ]
        })
          let list = [...CarNoList.value,..._data]
          CarNoList.value = list
          sjloading.value = false
        })
    }
    const handlePayOrderIndexs = ()=>{    // 刷新账单列表
      let objDate = JSON.parse(JSON.stringify(billItem.value))
      objDate.page = 1
      
      objDate.pageSize = objDate.page * objDate.pageSize
      zhangdanloading.value = true
      request({
          url: '/financial/payOrder/index',
          method: 'get',
          params:objDate
        }).then(res=>{
          if(res.code == 200){
            zhangdanloading.value = false
            let _data = res.data.items
            _data.map((v,i)=>{
              let arr = []
              let arrs = []
              v.pay_price = (v.pay_price - 0).toFixed(2)
                v.pay_real_price = (v.pay_real_price - 0).toFixed(2)
                v.discount_price = (v.discount_price - 0).toFixed(2)
                v.no_tax_price = (v.no_tax_price - 0).toFixed(2)
              v.detail.map((vv,ii)=>{
                vv.car_nos = '';
                vv.car_nos = vv.prediction.car_no
                
                if(vv.pay_price != '0.00' && vv.is_confirm == 1){
                  arr.push(vv)
                }
              })
              v.detail = handleSOrt(arr)
              let carArr = []
              v.detail.map((vv,ii)=>{
                carArr.push(vv.car_nos)
              })
              var newArr = carArr.filter(function(item,index){
                return carArr.indexOf(item) === index;  // 因为indexOf 只能查找到第一个  
              });
              let numArr = []
              newArr.map((vv,ii)=>{
                let num = 0
                let name = ''
                carArr.map((vvv,iii)=>{
                  if(vv == vvv){
                    num++
                    name = vvv
                  }
                })
                numArr.push({car_no:name,weizhi:num,weizhizong:num})
              })
              let weizhiArr = []
              let weizhinum = 0
              numArr.map((vv,ii)=>{
                weizhinum += vv.weizhi
                weizhiArr.push({car_no:vv.car_no,weizhi:weizhinum,weizhizong:vv.weizhizong})
              })
              v.detail.map((vv,ii)=>{
                weizhiArr.map((vvv,iii)=>{
                  if(vv.car_nos == vvv.car_no){
                    vv.weizhi = vvv.weizhi
                    vv.weizhizong = vvv.weizhizong
                  }
                })
              })
              v.disabled = false
              if((v.pay_status == 2 && v.is_wait_check == 1) || v.pay_status != 2){
                v.disabled = true
              }
              v.order_no = v.driver_order?.order_no || ''
              v.flag = false
            })
            billList.value = _data
          }
          
        })
    }
    const handleSOrt = (ceshiArr)=>{   //排序
      let arr = []           // 最终数据
      let linshiArr = []     //  未匹配的放数组里
      let linshititle = ''   // 临时变量
      ceshiArr.map((v,i)=>{
        if(i == 0){
          linshititle = v.name
          arr.push(v)
        }else{
          if(linshititle == v.name){
            arr.push(v)
          }else{
            linshiArr.push(v)
          }
        }
      })
      ceshiArr.map((v,i)=>{
        if(linshiArr.length != 0){
          linshiArr.map((vv,ii)=>{
            if(ii == 0){
              linshititle = linshiArr[0].name
              arr.push(linshiArr.shift())
            }else{
              if(linshititle == vv.name){
                arr.push(linshiArr.slice(ii,1))
              }
            }
            
          })
          
        }
      })
      arr.sort((a, b) => a.car_nos.localeCompare(b.car_nos));
      return arr
    }
    const handlePayOrderIndex = ()=>{    // 获取账单
      zhangdanloading.value = true
      request({
        url: '/financial/payOrder/index',
        method: 'get',
        params:billItem.value
      }).then(res=>{
        if(res.code == 200){
          zhangdanloading.value = false
          let _data = res.data.items
          _data.map((v,i)=>{
            let arr = []
            let arrs = []
            v.pay_price = (v.pay_price - 0).toFixed(2)
                v.pay_real_price = (v.pay_real_price - 0).toFixed(2)
                v.discount_price = (v.discount_price - 0).toFixed(2)
                v.no_tax_price = (v.no_tax_price - 0).toFixed(2)
            v.detail.map((vv,ii)=>{
              vv.car_nos = '';
              vv.car_nos = vv.prediction.car_no
              
              // if(v.prediction_id){
                
              // }else{
              //   if(v.prediction_order_id != 0 && v.prediction_driver_order_id == 0){  //  补费
              //     vv.car_nos = ''
              //   }else{  // 装车收费
              //     if(vv.order_detail.prediction_id == 0){
              //       vv.car_nos = vv.order_detail.wareuserdetail.car_no
              //     }else{
              //       vv.car_nos = vv.order_detail.prediction.car_no
              //     }
              //   }
              // }
              if(vv.pay_price != '0.00' && vv.is_confirm == 1){
                arr.push(vv)
              }
            })
            v.detail = handleSOrt(arr)
            let carArr = []
            v.detail.map((vv,ii)=>{
              carArr.push(vv.car_nos)
            })
            var newArr = carArr.filter(function(item,index){
              return carArr.indexOf(item) === index;  // 因为indexOf 只能查找到第一个  
            });
            let numArr = []
            newArr.map((vv,ii)=>{
              let num = 0
              let name = ''
              carArr.map((vvv,iii)=>{
                if(vv == vvv){
                  num++
                  name = vvv
                }
              })
              numArr.push({car_no:name,weizhi:num,weizhizong:num})
            })
            let weizhiArr = []
            let weizhinum = 0
            numArr.map((vv,ii)=>{
              weizhinum += vv.weizhi
              weizhiArr.push({car_no:vv.car_no,weizhi:weizhinum,weizhizong:vv.weizhizong})
            })
            v.detail.map((vv,ii)=>{
              weizhiArr.map((vvv,iii)=>{
                if(vv.car_nos == vvv.car_no){
                  vv.weizhi = vvv.weizhi
                  vv.weizhizong = vvv.weizhizong
                }
              })
            })
            v.disabled = false
            if((v.pay_status == 2 && v.is_wait_check == 1) || v.pay_status != 2){
              v.disabled = true
            }
            v.order_no = v.driver_order?.order_no || ''
            v.flag = false
          })
          let list = [...billList.value,..._data]
          billList.value = list
          if(list.length != 0){
            orderShowItemsRef.value.handleZhifuInfo(billList.value[0].contract_id)
          }
        }
        
      })
    }
    // 点击受理
      const orderShouli = (item) => {
      handleMare()
      item.detail.map((v,i)=>{
        if(v.prediction_id){
          v.batch_no = v.prediction.batch_no
          v.car_no = v.prediction.car_no
          v.goods_name = v.prediction.goods_name
          v.work_line = v.prediction.work_line
          v.transport_number = v.prediction.transport_number
          v.producer = v.prediction.producer
          v.box = v.prediction.box
          v.box_type = v.prediction.box_type
          v.pick_weight = (v.pick_weight - 0)
        }else{
          v.batch_no = v.wareuserdetail.batch_no
          v.car_no = v.wareuserdetail.car_no
          v.goods_name = v.wareuserdetail.goods_name
          v.work_line = ''
          v.transport_number = ''
          v.producer = ''
          v.box = v.wareuserdetail.box
          v.box_type = v.wareuserdetail.box_type
          v.pick_weight = (v.pick_weight - 0)
        }
      })
          slitem.value = item;
      predictionOrder
              .acceptPrintRecord({
                  id: slitem.value.id,
                  pick_method: pick_method.value,
                  buff_type:buff_type.value
              })
              .then((res) => {
                  handleOrderIndexs()
              });
      };
      // 受理弹窗点击确定
      // const handleslOk = () => {
      // 	predictionOrder
      // 		.acceptPrintRecord({
      // 			id: slitem.value.id,
      // 			pick_method: pick_method.value,
      // 			buff_type:buff_type.value
      // 		})
      // 		.then((res) => {
      // 			slshowModle.value = false;
      // 			handleOrderIndexs()
      // 		});
      // };
    const handleYuGuBill = ()=>{    // 预估账单
      request({
        url: '/prediction/order/yuguData',
        method: 'get',
        params:{order_id:activeItem.value.id}
      }).then(res=>{
        let _data = res.data
        _data.created_at = activeItem.value.created_at
        yuguBillItem.value = _data
      })
    }
    const editShow = async (item) => {  // 创建账单
      editRef.value.open(cloneDeep(item))
    }
    const editSubmit = async (formData) => {   // 确认创建账单
      let submitData = cloneDeep(formData)
      console.log('editSubmit:',submitData)
      submitData.pay_items_json.forEach(item => {
        item.pay_price = item.pay_price.toFixed(2)
      })
      if (!formData.id) {
        let res = await FinancialPayOrder.save(submitData)
        if (res.success) {
          Message.success(res.message)
          // load(loadData)
          // crudRef.value.refresh()
          handlePayOrderIndexs()
          return true
        }
        return false;
      }else{
        let res = await FinancialPayOrder.editPay(submitData, formData.id)
        if (res.success) {
          Message.success(res.message)
          // load(loadData)
          // crudRef.value.refresh()
          handlePayOrderIndexs()
          return true
        }
      }
      return false
    }
    const handleTabs = (e) => {   // 切换选项卡
      tabs.value = e
      if(e == 'zc'){
        orderItem.value.order_id = activeItem.value.id
        orderItem.value.page = 1
        orderItem.value.pageSize = 10
        orderItem.value.type = 2
        deriverorderLists.value = []
        setTimeout(() => {
          zcScrollHeight.value = zcScroll.value.offsetHeight
          handlederiverorderList()
        }, 202);
      }
      if(e == "sj"){
        CarNoItem.value.order_id = activeItem.value.id
        CarNoItem.value.page = 1
        CarNoItem.value.pageSize = 10
        CarNoList.value = []
        setTimeout(() => {
          sjScrollHeight.value = sjScroll.value.offsetHeight
          handleorderCarList()
        }, 202);
        getCarNoList(activeItem.value.dept_id)
      }
      if(e == "zd"){
        billItem.value.prediction_order_id = activeItem.value.id
        billItem.value.page = 1
        billItem.value.pageSize = 10
        billList.value = []
        setTimeout(() => {
          zdScrollHeight.value = zdScroll.value.offsetHeight
          handlePayOrderIndex()
          // handleYuGuBill()
        }, 202);
      }
      if(e == "xd"){
        xiadanItem.value.order_id = activeItem.value.id
        xiadanItem.value.prediction.goods_name = ''
        xiadanItem.value.prediction.car_no = ''
        xiadanItem.value.prediction.box = ''
        xiadanItem.value.prediction.box_type = ""
        xiadanList.value = []
        CarNoItem.value.page = 1
        CarNoItem.value.car_ids = ''
        CarNoItem.value.order_id = activeItem.value.id
        CarNoList.value = []
        xiadan_car_no.value = ''
        setTimeout(() => {
          xdScrollHeight.value = xdScroll.value.offsetHeight
          handleXiaDanList()
          handleorderCarList()
        }, 202);
      }
    }
    const handleActive = (e)=>{  // 选择提货单
      active.value = e
      tabs.value = 'jc'
    }
    const handleScroll = (event)=>{
      // 计算是否触底
      
      let isBottom = (event.target.scrollTop + event.target.clientHeight + 20) >= event.target.scrollHeight
      if (isBottom) {
        // 到达滚动条底部，触发事件
        console.log('已经触底')
        form.value.page++
        handleOrderIndex()
      }
    }
    const handlezcScroll = (event)=>{
      // 计算是否触底
      let isBottom = (event.target.scrollTop + event.target.clientHeight + 20) >= event.target.scrollHeight
      if (isBottom) {
        // 到达滚动条底部，触发事件
        console.log('已经触底')
        orderItem.value.page++
        handlederiverorderList()
      }
    }
    const handlesjScroll = (event)=>{
      // 计算是否触底
      let isBottom = (event.target.scrollTop + event.target.clientHeight + 20) >= event.target.scrollHeight
      if (isBottom) {
        // 到达滚动条底部，触发事件
        console.log('已经触底')
        CarNoItem.value.page++
        handleorderCarList()
      }
    }
    const handlezdScroll = (event)=>{
      // 计算是否触底
      let isBottom = (event.target.scrollTop + event.target.clientHeight + 20) >= event.target.scrollHeight
      if (isBottom) {
        // 到达滚动条底部，触发事件
        billItem.value.page++
        handlePayOrderIndex()
      }
    }
    const handlexdScroll = (event)=>{
      // 计算是否触底
      let isBottom = (event.target.scrollTop + event.target.clientHeight + 20) >= event.target.scrollHeight
      if (isBottom) {
        // 到达滚动条底部，触发事件
        xiadanItem.value.page++
        handleXiaDanList()
      }
    }
    // 更新列表
    const handleOrderIndexs = ()=>{
      let objDate = JSON.parse(JSON.stringify(form.value))
      objDate.pageSize = (objDate.page) * objDate.pageSize
      objDate.page = 1
      let obj = {}
      for(let key in objDate){
        if(objDate[key]){
          obj[key] = objDate[key]
        }
      }
      loading.value = true
      request({
          url: '/prediction/order/index',
          method: 'get',
          params:obj
        }).then(res=>{
          let _data = res.data.items
          if(_data.length != 0){
            _data.map((v,i)=>{
              let car_nos = []
              v.detail.map((vv,ii)=>{
                vv.prediction = vv.prediction
                if(car_nos.length == 0){
                  console.log('car_nos:',vv.prediction)
                  car_nos.push(vv.prediction.car_no)
                }else{
                  let num = car_nos.findIndex(item => item === vv.prediction.car_no)
                  if(num == -1){
                    car_nos.push(vv.prediction.car_no)
                  }
                }
              })
              v.car_nos = car_nos
              if(v.car_nos.length < 10){
                v.showCar = true
              }else{
                v.showCar = false
              }
              v.pick_type = v.service_type
            })
  
            _data.map((v,i)=>{
              if(v.id == active.value){
                activeItem.value = v
              }
            })
          }else{
            activeItem.value = {}
          }
          // tabs.value = "jc"
          
          cardLists.value = _data
          loading.value = false
        })
    }
    const handleOrderIndex = ()=>{
      let obj = {}
      for(let key in form.value){
        if(form.value[key]){
          obj[key] = form.value[key]
        }
      }
      loading.value = true
      request({
          url: '/prediction/order/index',
          method: 'get',
          params:obj
        }).then(res=>{
          let _data = res.data.items
          _data.map((v,i)=>{
            let car_nos = []
            v.detail.map((vv,ii)=>{
              vv.prediction = vv.prediction
              if(car_nos.length == 0){
                car_nos.push(vv.prediction.car_no)
              }else{
                let num = car_nos.findIndex(item => item === vv.prediction.car_no)
                if(num == -1){
                  car_nos.push(vv.prediction.car_no)
                }
              }
            })
            v.car_nos = car_nos
            if(v.car_nos.length < 10){
              v.showCar = true
            }else{
              v.showCar = false
            }
            
          })
          if(form.value.page == 1 && res.data.items.length != 0){
            console.log('11111111111111111111')
            activeItem.value = _data[0]
          }
          let list = [...cardLists.value,..._data]
          if(obj.page == 1 && list.length!= 0){
            active.value = list[0].id
          }
          cardLists.value = list
          loading.value = false
        })
    }
    const handleOkTime = (dateString, date)=>{
      form.value.created_at = dateString
    }
    const handleOkTimes = (dateString, date)=>{
      orderItem.value.created_at = dateString
    }
    const handlederiverpickStatus = ()=>{
      request({
          url: '/system/dataDict/list?code=deriver_pick_status',
          method: 'get',
          
        }).then(res=>{
          deriver_pick_statusList.value = res.data
        })
    }
    const handletransportType = ()=>{
      request({
          url: '/system/dataDict/list?code=transport_type',
          method: 'get',
          
        }).then(res=>{
          transport_typeList.value = res.data
        })
    }
    const handlepickType = ()=>{
      request({
          url: '/system/dataDict/list?code=pick_type',
          method: 'get',
        }).then(res=>{
          pick_typeList.value = res.data
        })
    }
    const handlebuffType = ()=>{
      request({
          url: '/system/dataDict/list?code=butt_type',
          method: 'get',
          
        }).then(res=>{
          buff_typeList.value = res.data
        })
    }
    const handlepickStatus = ()=>{
      request({
          url: '/system/dataDict/list?code=pick_status',
          method: 'get',
          
        }).then(res=>{
          pick_statusList.value = res.data
        })
    }
    const handleDeptList = ()=>{
      request({
          url: 'system/dept/remote',
          method: 'post',
          data:{
            openPage:false,
            remoteOption:{
              filter:{
                type:['=',2],
                status: ['=',1]
              },
              select: ["id", "name"],
              sort: {id: "desc"}
            }
          }
        }).then(res=>{
          res.data.map((v,i)=>{
          v.keywords = [
            v.name,
            pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
            pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
          ]
  })
          dept_list.value = res.data
        })
    } 
    const handlePsDeptList = ()=>{
        request({
          url: 'system/dept/remote',
          method: 'post',
          data:{
            openPage:false,
            remoteOption:{
              filter:{
                type:['=',3],
                status: ['=',1]
              },
              select: ["id", "name"],
              sort: {id: "desc"}
            }
          }
        }).then(res=>{
          res.data.map((v,i)=>{
            v.keywords = [
              v.name,
              pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
              pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
            ]
          })
          ps_deptList.value = res.data
        })
    }
    const handleyuGuZhangdan = (row)=>{
      request({
          url: "prediction/order/yuguData",
          method: "get",
          params: {
            order_id:row.id,
          },
        }).then((res) => {
          let arr = []
          res.data.pay_items_json.map((v,i)=>{
            v.pay_price = v.pay_price - 0
            if(v.pay_price != 0){
              arr.push(v)
            }
          })
          res.data.pay_items_json = arr
          yujiItem.value = res.data
          yuGuzdShow.value = true
        });
      
    }
    const handleZhangdan = (item)=>{
      orderShowItems.value = true
      orderShowItemsRef.value.open(item)
    }
      const orderGengzheng = (item) => {
          gengzheng_id = item.id;
          gengzhengvisible.value = true;
      };
      const handlecolse = ()=>{
          orderQueShow.value = false
          crudRef.value.refresh();
      }
      const handlegengzhengOk = async () => {
        let res = await predictionOrder.correctOrder({ id: gengzheng_id })
        if (res.code == 200) {
            Notification.success("更正成功！");
            crudRef.value.refresh();
            return true;
        }else{
            Message.error(res.message);
            return false;
        }
          
      };
      
      
      const confirmOk = (id) => {
          handleRedo(id);
      handleMare()
      };
      
      
  
      
  
  const handleRedo = (id) => {
    predictionOrder.getcancelOrder(id).then((res) => {
      if (res.code == 200) {
        Message.success("取消成功！");
        handleOrderIndexs()
      }
    });
  };
  
  
  
  
  
  
  
  
  
  const handleCancel = () => {
    gengzhengvisible.value = false;
    crudRef.value.refresh()
  };
  
  
  
  
  
  </script>
  <style lang="less" scoped>
  
  
  /* .table tr td:last-child{
    border-right: none;
  }
  .table tr:last-child td{
    border-bottom: none;
  } */
   .activetabs{
      border-radius:10px 10px 0 0;
      background:rgba(242, 243, 255, 1);
      border-bottom:4px solid rgba(31, 108, 235, 1);
   }
  .flex{
        display:flex;
    }
    .flex_wrap{
        flex-wrap:wrap
    }
    
    .justify_between{
        justify-content:space-between
    }
    .justify_around{
        justify-content:space-around
    }
    .justify_center{
        justify-content:center
    }
    .justify_end{
      justify-content: flex-end;
    }
    .align_center{
        align-items:center;
    }
    .flex_column{
      flex-direction: column;
    }
    .flex_1{
        flex:1
    }
    .width0{
        width:0
    }
    .ellipsis{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .marbot14{
      margin-bottom:14px;
    }
    .marbot12{
      margin-bottom:12px;
    }
    .pad12{
      padding:12px;
    }
    .zc_card{
      border-radius:6px;
      border:1px solid rgba(220, 220, 220, 1);
      margin-bottom:12px;
      margin-right:12px;
      &:nth-child(2n){
        margin-right:0;
      }
      .butNt{
        padding:2px 8px;
        border-radius:3px;
        border:1px solid rgba(220, 220, 220, 1);
        margin-right:12px;
        margin-bottom:12px
      }
    }
    .cards{
      padding:20px;
      border-radius:8px;
      border:1px solid rgba(0, 0, 0, .15);
      margin-bottom:12px;
      width:100%;
    }
    .cursor{
      cursor: pointer;
    }
  </style>
  <script>
  export default {name: "send:order"};
  </script>
  